---
title: Tutoriel - Élargir avec les transitions de vue
description: >-
  Ajouter les transitions de vue au code du tutoriel Construire un blog.
i18nReady: true
---
import { Steps } from '@astrojs/starlight/components';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
import Box from '~/components/tutorial/Box.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';
import Spoiler from '~/components/Spoiler.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import ReadMore from '~/components/ReadMore.astro'


**Les transitions de vue (View Transitions)** sont un moyen de contrôler ce qui se passe lorsque les visiteurs naviguent au milieu des pages de votre site. L'API View Transitions d'Astro vous permet d'ajouter des fonctions de navigation optionnelles, notamment des transitions et des animations fluides, le contrôle de la pile d'historique des pages visitées du navigateur et la prévention des rafraîchissements complets de la page afin de conserver certains éléments et états de la page tout en mettant à jour le contenu affiché.

<PreCheck>
  - Importer et ajouter le routeur `<ViewTransitions />` à un élément `head` commun
  - Ajouter des listeners (écouteurs) d'événements pendant le processus de navigation pour déclencher des `<script>` lorsque c'est nécessaire
  - Ajouter des animations de transition de page en utilisant des directives de transition
  - Désactiver le routage côté client pour un lien de page individuel
</PreCheck>

## Prérequis

Vous aurez besoin **d'un projet Astro existant avec une mise en page de base commune ou un composant `<Head />`**.

Ce tutoriel utilise le [projet fini du tutoriel Construire un blog](https://github.com/withastro/blog-tutorial-demo) pour démontrer l'ajout de transitions de vue (routage côté client) à un projet Astro existant. Vous pouvez forker et utiliser cette base de code localement, ou compléter le tutoriel dans le navigateur en [éditant le code du tutoriel du blog dans StackBlitz](https://stackblitz.com/github/withastro/blog-tutorial-demo/tree/complete?file=src%2Fpages%2Findex.astro).

Vous pouvez suivre ces étapes avec votre propre projet Astro, mais vous devrez adapter les instructions à votre base de code.

Nous vous recommandons d'utiliser d'abord notre exemple de projet pour compléter ce court tutoriel. Ensuite, vous pourrez utiliser ce que vous avez appris pour créer des transitions de vue dans votre propre projet.

## Construire un blog sur des tutoriels de code

Dans le [Tutoriel d'introduction à la création d'un blog](/fr/tutorial/0-introduction/), vous avez découvert le [routage intégré basé sur les fichiers](/fr/guides/routing/#routes-statiques) d'Astro : tout fichier `.astro`, `.md`, ou `.mdx` situé dans le dossier `src/pages/` devient automatiquement une nouvelle page de votre site.

Pour naviguer entre ces pages, vous avez utilisé l'élément HTML standard `<a>`. Par exemple, pour créer un lien vers votre page "À propos", vous avez ajouté `<a href="/about/">À propos</a>` à l'en-tête de votre page. Lorsqu'un visiteur de votre site clique sur ce lien, le navigateur se rafraîchit et charge une nouvelle page avec un contenu entièrement nouveau.

## Navigation pleine page vs routage côté client (mode SPA)

Lorsqu'un navigateur actualise et charge une nouvelle page, il n'y a pas de continuité entre l'ancienne et la nouvelle page. Lors du routage côté client, une nouvelle page est affichée sans qu'il soit nécessaire de rafraîchir le navigateur.

Le routage côté client est une caractéristique des sites d'application à page unique (SPA), où l'ensemble du site ou de l'application est une "page" de JavaScript dont le contenu est mis à jour en fonction de l'interaction avec le visiteur.

Comme chaque nouvelle page ne nécessite pas un rafraîchissement complet du navigateur, le routage côté client vous permet de contrôler les transitions entre les pages de plusieurs façons. **Les éléments persistants**, tels que l'en-tête d'une page commune, n'ont pas besoin d'être entièrement re-rendus à l'écran. La transition d'une page à l'autre peut sembler beaucoup plus fluide. De plus, l'état peut être préservé, ce qui vous permet de transférer des valeurs d'une page à l'autre, ou même de continuer à diffuser une vidéo pendant que vos visiteurs naviguent au sein des pages !

Il arrive que vous souhaitiez ou ayez besoin d'un rafraîchissement complet du navigateur. Par exemple, lorsqu'un lien amène un visiteur à un document `.pdf`, vous aurez besoin que le navigateur charge cette nouvelle page à partir du serveur. Même si les transitions de vue sont activées dans votre projet Astro, vous pourrez spécifier comment le navigateur doit naviguer par défaut et par lien, et même renoncer complètement au routage côté client.

Pour en savoir plus sur les [transitions de vue d'Astro](/fr/guides/view-transitions/), consultez notre guide, ou plongez dans les instructions ci-dessous pour étendre le blog avec les transitions de vue.

  <Box icon="question-mark">
### Testez vos connaissances

1. Ajout de transitions de vue à mon site Astro...

    <MultipleChoice>
      <Option>
        Nécessite plus de 2 lignes de code pour la mise en œuvre par défaut sur l'ensemble du site.
      </Option>
      <Option isCorrect>
        Modifie le type de navigation par défaut sur une page qui contient le routeur `<ViewTransitions />` dans son `<head>`.
      </Option>
      <Option>
        Ne propose pas de fonctionnalités d'accessibilité normalement fournies par le navigateur, telles que le suivi des routes et le respect du principe de `prefers-reduced-motion`.
      </Option>
    </MultipleChoice>

2. Qu'est-ce qui n'est **pas** un avantage des transitions de vue d'Astro ?

    <MultipleChoice>
      <Option isCorrect>
        Envoi de JavaScript supplémentaire au navigateur pour le routage côté client
      </Option>
      <Option>
        La possibilité de conserver des éléments et des composants individuels lorsqu'un visiteur se rend sur une nouvelle page
      </Option>
      <Option>
        Contrôler le type de navigation à utiliser pour chaque lien
      </Option>
    </MultipleChoice>

3. La vue transitant par le routeur...
    <MultipleChoice>
      <Option>
        Nécessite l'utilisation d'un framework UI tel que React
      </Option>
      <Option>
        N'est pas prêt pour les sites de production
      </Option>
      <Option isCorrect>
        Inclut un fonctionnement de secours pour les navigateurs qui ne prennent pas encore totalement en charge les transitions d'affichage.
      </Option>
    </MultipleChoice>

</Box>

## Ajouter des transitions de vue au tutoriel sur les blogs

Les étapes ci-dessous vous montrent comment enrichir le produit final du tutoriel Construire un blog en ajoutant un routage côté client pour améliorer les transitions entre les pages.

### Mise à jour des dépendances
<Steps>
1. Mettez à jour la dernière version d'Astro, et mettez à jour toutes les intégrations vers leurs dernières versions en exécutant les commandes suivantes dans votre terminal :
    
    <PackageManagerTabs>
      <Fragment slot="npm">
        ```shell
        # Upgrade to Astro v4.x
        npm install astro@latest
    
        # Exemple: mettre à jour le tutoriel du blog intégration de Preact
        npm install @astrojs/preact@latest
        ```
      </Fragment>
      <Fragment slot="pnpm">
        ```shell
        # Mise à niveau vers Astro v4.x
        pnpm add astro@latest
    
        # Exemple: mettre à jour le tutoriel du blog intégration de Preact
        pnpm add @astrojs/preact@latest
        ```
      </Fragment>
      <Fragment slot="yarn">
        ```shell
        # Mise à niveau vers Astro v4.x
        yarn add astro@latest
    
        # Exemple: mettre à jour le tutoriel du blog intégration de Preact
        yarn add @astrojs/preact@latest
        ```
      </Fragment>
    </PackageManagerTabs>
    
    :::tip
    Si vous utilisez votre propre projet, veillez à mettre à jour toutes les dépendances que vous avez installées. L'exemple de code du tutoriel sur les blogs n'utilise que l'intégration Preact.
    :::
</Steps>
### Ajouter le routeur `<ViewTransitions />`.
<Steps>
  
2. Importez et ajoutez le composant `<ViewTransitions />` dans le `<head>` de votre mise en page.

    Dans l'exemple du tutoriel Blog, l'élément `<head>` se trouve dans `src/layouts/BaseLayout.astro`. Le routeur `ViewTransitions` doit d'abord être importé dans le frontmatter du composant. Ensuite, ajoutez le composant de routage à l'intérieur de l'élément `<head>`.
    
    ```astro title="src/layouts/BaseLayout.astro" ins={2,15}
    ---
    import { ViewTransitions } from "astro:transitions";
    import Header from "../components/Header.astro";
    import Footer from "../components/Footer.astro";
    import "../styles/global.css";
    const { pageTitle } = Astro.props;
    ---
    <html lang="fr">
      <head>
        <meta charset="utf-8" />
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <meta name="viewport" content="width=device-width" />
        <meta name="generator" content={Astro.generator} />
        <title>{pageTitle}</title>
        <ViewTransitions />
      </head>
      <body>
        <Header />
        <h1>{pageTitle}</h1>
        <slot />
        <Footer />
        <script>
          import "../scripts/menu.js";
        </script>
      </body>
    </html>
    ```

    Aucune autre configuration n'est nécessaire pour activer la navigation par défaut côté client d'Astro ! Astro créera des animations de page par défaut basées sur les similitudes entre l'ancienne et la nouvelle page, et fournira également un comportement de repli pour les navigateurs non pris en charge.

3. Naviguer au fil des pages dans l'aperçu de votre site.

    Affichez l'aperçu de votre site **sur un grand écran, par exemple en mode bureau**. Lorsque vous passez d'une page à l'autre sur votre site, vous remarquez que le contenu de l'ancienne page s'efface au fur et à mesure que le contenu de la nouvelle page s'affiche. Utilisez le [guide des transitions d'affichage](/fr/guides/view-transitions/) pour ajouter un comportement personnalisé si vous n'êtes pas satisfait des valeurs par défaut.
  
    Affichez l'aperçu de votre site **à une taille d'écran plus petite**, et essayez d'utiliser le menu hamburger pour naviguer entre les pages. Remarquez que votre menu ne fonctionnera plus après le chargement de la première page.

</Steps>
### Mise à jour des scripts

Avec les transitions de vue, certains scripts peuvent ne plus se réexécuter après la navigation dans la page, comme c'est le cas lors de l'actualisation complète du navigateur. Il existe plusieurs [événements au cours du routage côté client que vous pouvez écouter](/fr/guides/view-transitions/#événements-du-cycle-de-vie), et déclencher des événements lorsqu'ils se produisent. Les scripts de votre projet devront maintenant s'accrocher à deux événements pour s'exécuter au bon moment pendant la navigation dans la page : [`astro:page-load`](/fr/guides/view-transitions/#astropage-load) et [`astro:after-swap`](/fr/guides/view-transitions/#astroafter-swap).

<Steps>
4. Rendre le script contrôlant le composant de menu mobile `<Hamburger />` disponible après avoir navigué vers une nouvelle page.

     Pour rendre votre menu mobile interactif après avoir navigué vers une nouvelle page, ajoutez le code suivant qui écoute l'événement `astro:page-load` qui s'exécute à la fin de la navigation sur la page, et en réponse, exécute le script existant pour faire fonctionner le menu hamburger lorsqu'on clique dessus :
    
    ```js title="src/scripts/menu.js" ins={1,5}
    document.addEventListener('astro:page-load', () => {
      document.querySelector('.hamburger').addEventListener('click', () => {
        document.querySelector('.nav-links').classList.toggle('expanded');
      });
    });
    ```

5. Rendre le script contrôlant le changement de thème disponible après la navigation de la page.

    Le `<script>` qui contrôle le basculement du thème clair/foncé est situé dans le composant `<ThemeIcon />`. Pour que le basculement de thème continue à fonctionner sur chaque page, supprimez l'attribut `is:inline` du script et ajoutez le même écouteur d'événement que dans l'exemple précédent afin que l'événement `astro:page-load` puisse déclencher votre fonction existante.

    Mettez à jour la balise script existante pour que votre fonction s'exécute en réponse à l'événement `astro:page-load`, rendant ainsi votre thème interactif une fois que la nouvelle page est entièrement chargée et visible par l'utilisateur :
    
    ```astro title="src/components/ThemeIcon.astro" ins={8,38} del="is:inline"
    ---
    ---
    <button id="themeToggle"> /* ... */ </button>
    
    <style> /* ... */ </style>
    
    <script is:inline>
      document.addEventListener('astro:page-load', () => {
        const theme = (() => {
          if (typeof localStorage !== "undefined" && localStorage.getItem("theme")) {
          return localStorage.getItem("theme");
        }
          if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
          return "dark";
        }
          return "light";
        })();
        
          if (theme === "light") {
          document.documentElement.classList.remove("dark");
        } else {
          document.documentElement.classList.add("dark");
        }
        
          window.localStorage.setItem("theme", theme);
        
          const handleToggleClick = () => {
          const element = document.documentElement;
          element.classList.toggle("dark");
        
          const isDark = element.classList.contains("dark");
          localStorage.setItem("theme", isDark ? "dark" : "light");
        };
    
        document
          .getElementById("themeToggle")
          .addEventListener("click", handleToggleClick);
      });
    </script>
    ```
    Désormais, le changement de thème est interactif sur chaque page lorsque l'on utilise le routeur `<ViewTransitions />`, une fois que la page a fini de se charger.

6. Vérifier la présence d'un thème précédent pour éviter le clignotement en mode sombre.

    Le changement de thème fonctionne sur chaque page, mais son script est chargé à la fin du processus de navigation, **après le chargement complet de la nouvelle page dans le navigateur**. Il peut y avoir un flash de la version à thème léger du site avant que le script de basculement de thème ne s'exécute et ne vérifie quel thème il doit utiliser sur la page.
  
    Pour vérifier et, si nécessaire, définir le mode sombre plus tôt dans le processus de navigation, créez une fonction qui s'exécutera en réponse à l'événement `astro:after-swap`. La fonction suivante, qui vérifie le `localStorage` du navigateur pour le thème sombre, sera exécutée **immédiatement après que la nouvelle page soit remplacée par l'ancienne**, avant que les éléments du DOM ne soient peints à l'écran.
  
    Ajoutez ce nouveau script au composant `<ThemeIcon />`, en plus du script qui contrôle le basculement du thème.
    
    ```astro title="src/components/ThemeIcon.astro" ins={3-9}
    <script> ... <script>
    
    <script>
      document.addEventListener('astro:after-swap', () => {
      localStorage.theme === 'dark'
        ? document.documentElement.classList.add("dark")
        : document.documentElement.classList.remove("dark");
    });
    </script>
    ```

</Steps>
    Désormais, chaque changement de page **qui utilise le routeur `<ViewTransitions />` pour la navigation côté client** (et donc l'accès à l'événement `astro:after-swap`) sera en mesure de détecter `theme : dark` à partir du `localStorage` du navigateur et de mettre à jour la page actuelle en conséquence avant que la page ne soit rendue pour l'observateur.
    
    <Box icon="question-mark">
      ### Testez vos connaissances
      
      Quel est l'ordre correct des événements après qu'un visiteur a cliqué sur un lien pour accéder à une nouvelle page lors de la navigation côté client ?

          <MultipleChoice>
            <Option>
              1. `astro:after-swap`
              2. `astro:page-load`
              3. la nouvelle page est visible
            </Option>
            <Option isCorrect>
              1. `astro:after-swap`
              2. la nouvelle page est visible
              3. `astro:page-load`
            </Option>
            <Option>
              1. `astro:page-load`
              2. la nouvelle page est visible
              3. `astro:after-swap`
            </Option>
          </MultipleChoice>


      </Box>

### Personnaliser les animations de transition
<Steps>

7. Remplacer l'animation `fade` par défaut par une animation `slide` pour le titre de la page.

    Lorsque les transitions d'affichage sont activées, vous disposez actuellement d'un petit fondu entrant et sortant pour toutes les animations de transition de page. Astro fournit également une animation intégrée de type `slide`. Pour changer le type d'animation pour un seul élément, ajoutez la directive `transition:animate=""`.

    Par exemple, pour faire glisser les titres de la page au lieu de les faire apparaître en fondu, ajoutez `transition:animate="slide"` à l'élément `<h1>` de la BaseLayout :
    
    ```astro title="src/layouts/BaseLayout.astro" ins='transition:animate="slide"'
    ---
    import Header from "../components/Header.astro";
    import Footer from "../components/Footer.astro";
    import "../styles/global.css";
    import { ViewTransitions } from "astro:transitions";
    const { pageTitle } = Astro.props;
    ---
    
    <html lang="fr">
    <head>
      <meta charset="utf-8" />
      <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
      <meta name="viewport" content="width=device-width" />
      <meta name="generator" content={Astro.generator} />
      <title>{pageTitle}</title>
      <ViewTransitions />
    </head>
      <body>
        <Header />
        <h1 transition:animate="slide">{pageTitle}</h1>
        <slot />
        <Footer />
        <script>
          import "../scripts/menu.js";
        </script>
      </body>
    </html>
    ```

</Steps>

    Dans l'aperçu de votre navigateur, vous verrez maintenant les titres de la page glisser sur l'écran, tandis que d'autres éléments tels que le corps du texte continuent à s'effacer.
    
    <Box icon="puzzle-piece">
      ### Essayez-le vous-même - Faites glisser les liens de navigation à l'intérieur

      Ajoutez une directive d'animation, pour que le `<div>` dans `Navigation.Astro` contenant tous les liens d'en-tête, glisse dans la page de navigation, en suivant les [mêmes étapes que ci-dessus](#personnaliser-les-animations-de-transition).
    
      <details>
        <summary>Montrez-moi le code.</summary>
        ```astro title="src/components/Navigation.astro" ins='transition:animate="slide"'
        ---
        ---
        <div transition:animate="slide" class="nav-links">
          <a href="/">Home</a>
          <a href="/about/">About</a>
          <a href="/blog/">Blog</a>
          <a href="/tags/">Tags</a>
        </div>
        ```
      </details>
    </Box>

    Vérifiez l'aperçu de votre navigateur et vous constaterez que le titre de la page et les liens de l'en-tête sont désormais insérés dans chaque page de navigation.

<Steps>
8. Ajoutez un fondu plus long aux descriptions de vos articles de blog.

    Vous pouvez également personnaliser les animations intégrées d'Astro en les important, puis en fournissant les propriétés d'animation CSS.

    Par exemple, pour que la description s'estompe lentement lorsque vous naviguez vers un article de blog, importez l'animation `fade` dans votre mise en page pour les articles de blog Markdown. Ensuite, ajoutez la directive de transition pour le `fade` d'Astro avec une durée de `2s` :
    
    ```astro title="src/layouts/MarkdownPostLayout.astro" ins={3} ins="transition:animate={fade({ duration: '2s' })}"
    ---
    import BaseLayout from "./BaseLayout.astro";
    import { fade } from "astro:transitions";
    const { frontmatter } = Astro.props;
    ---
    
    <BaseLayout pageTitle={frontmatter.title}>
      <p>{frontmatter.pubDate.slice(0, 10)}</p>
      <p transition:animate={fade({ duration: '2s' })} ><em>{frontmatter.description}</em></p>
      <p>Écrit par : {frontmatter.author}</p>
      <img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />
      <slot />
    </BaseLayout>
    ```
    Naviguez vers n'importe quel article de blog dans l'aperçu de votre navigateur, et vous verrez que la description s'affiche en fondu plus lentement que le reste du texte.
    
    <ReadMore>En savoir plus sur les différentes [directives de transition](/fr/guides/view-transitions/#directives-de-transition) et [personnalisation des animations](/fr/guides/view-transitions/#personnalisation-des-animations).</ReadMore>
</Steps>
### Forcer le rechargement complet du navigateur pour certains liens
<Steps>

9. Empêcher le routage côté client et demander au navigateur de se recharger lorsqu'il navigue vers votre page "À propos".

    Il peut arriver que vous souhaitiez que le navigateur soit entièrement rechargé lorsque les visiteurs cliquent sur un certain lien. Par exemple, vous pouvez créer un lien vers une page qui n'utilise pas le routeur `<ViewTransitions />`, ou vers un fichier directement, comme un `.pdf`.

    Pour que votre navigateur se rafraîchisse à chaque fois que vous cliquez sur le lien de navigation pour aller à votre page "About", ajoutez l'attribut `data-astro-reload` à la balise `<a>` de votre composant `<Navigation />`. Cela remplacera entièrement le routeur `<ViewTransitions />`, et toutes les animations de transition de vue, pour ce seul lien.
    
    ```astro title="src/components/Navigation.astro" ins='data-astro-reload'
    ---
    ---
    <div transition:animate="slide" class="nav-links">
      <a href="/">Home</a>
      <a href="/about/" data-astro-reload>À propos</a>
      <a href="/blog/">Blog</a>
      <a href="/tags/">Tags</a>
    </div>
    ```

    Désormais, lorsque vous cliquez sur le lien de navigation vers votre page "À propos", aucune animation ne se produira. Les liens et le titre de la page ne glisseront pas et le contenu de la page ne s'affichera pas en fondu lorsque vous naviguerez vers votre page À propos **en utilisant ce lien**.

10. Ajoutez un lien vers votre page "À propos" à partir de votre nom d'auteur dans votre mise en page Markdown pour les articles de blog.
    
    `data-astro-reload` ne déclenche un rafraîchissement complet du navigateur que lorsque l'on accède à une nouvelle page **à partir du lien auquel il a été ajouté**. Il ne contrôle pas tous les cas où l'on navigue vers votre page "À propos".

    Dans votre composant `<MarkdownPostLayout />`, ajoutez un lien vers votre page "À propos" sur votre nom d'auteur :
      
    ```astro title="src/layouts/MarkdownPostLayout.astro" ins='<a href="/about/">' ins="</a>"
    ---
    import BaseLayout from "./BaseLayout.astro";
    import { fade } from "astro:transitions";
    const { frontmatter } = Astro.props;
    ---
    
    <BaseLayout pageTitle={frontmatter.title}>
      <p>{frontmatter.pubDate.slice(0, 10)}</p>
      <p transition:animate={fade({ duration: '2s' })} ><em>{frontmatter.description}</em></p>
      <p>Écrit par : <a href="/about/">{frontmatter.author}</a></p>
      <img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />
      <slot />
    </BaseLayout>
    ```
</Steps>
  
    Si vous visitez un article de blog dans l'aperçu de votre navigateur et que vous cliquez sur le nom de l'auteur pour accéder à la page "À propos", à quoi ressemble la navigation dans la page ?
    
    <p>
      Lorsqu'un visiteur clique sur un lien vers la page "À propos" à partir d'un article de blog, le titre de la page et les liens de navigation de l'en-tête <Spoiler>glissent à travers l'écran</Spoiler> parce que <Spoiler>l'attribut `data-astro-reload` n'est pas défini sur ces liens.</Spoiler>.
    </p>

Il y a encore beaucoup de choses à explorer ! Consultez notre [guide complet des transitions de vue](/fr/guides/view-transitions/) pour découvrir d'autres choses que vous pouvez faire avec les transitions de vue.

Pour l'exemple complet du tutoriel du blog utilisant les transitions de vue, voir la [branche View Transitions](https://github.com/withastro/blog-tutorial-demo/tree/view-transitions) du répertoire du tutoriel.
